        Ext.namespace("topologic","topologic.vml");
        topologic.vml.Topologic=function(parent)
        {
          this.parent=parent;
          parent.framediv=this;
          this.elements={};
          this.lines=[];
          
        }
       
        topologic.vml.Topologic.prototype.createMovaleElement=function(x,y,width,height,title,id)
        {
             var element=document.createElement("v:RoundRect");
             element.style.position="absolute";
             element.style.posLeft=x;
             element.style.posTop=y;
             element.style.width=width;
             element.style.height=height;
             element.style.zIndex=7;
             element.id=id;
            
             var text=document.createElement("v:TextBox");
             text.inset="5pt,5pt,5pt,5pt" ;
             text.style.fontSize="10.2pt";
             text.innerHTML=title;
             element.appendChild(text);
            
             this.parent.appendChild(element);
            
             element.parent=this.parent;
            
            
             element.canmove=false;
             element.onmousedown=function(){
               this.canmove=true;
               this.parent.element=this;
               this.parent.onmousemove=function(){
                 if(this.element&&this.element.canmove){
                    this.element.style.posLeft=event.x;
                    this.element.style.posTop=event.y;
                    if(this.framediv.lines.length&&this.framediv.lines.length>0)
                    {
                      for(var i=0,s=this.framediv.lines.length;i<s;i++)
                      {
                         var line=this.framediv.lines[i];
                         if(line.from==this.element.id)
                         {
                            line.dom.from=event.x+","+event.y;
                           
                         }
                         if(line.to==this.element.id)
                         {
                            line.dom.to=event.x+","+event.y;
                           
                         }
                      }
                    }
                 }
               }
            }
           
             this.parent.onmouseup=function(){
                if(this.element)this.element.canmove=false;
               
             };
            
            
             var result={
               dom:element,
               x:x,
               y:y,
               width:width,
               height:height
             };
             this.elements[id]=result;
            
             
            
            
             return result;
        }
       
       
        topologic.vml.Topologic.prototype.createLine=function(from,to,id)
        {
          var fromElement=this.elements[from];
          var toElement=this.elements[to];
          var line =document.createElement("v:line");
          line.style.position="absolute";
          line.style.zIndex=8;
          line.from=(fromElement.x)+","+(fromElement.y);
          line.to=(toElement.x)+","+(toElement.y);
          var stroke=document.createElement("v:stroke");
          stroke.EndArrow="Classic";
          line.appendChild(stroke);
          this.parent.appendChild(line);
         
          var result={
           dom:line,
           from:from,
           to:to,
           id:id
          };
          this.lines[this.lines.length]=result;
          return result;
        }